<template>
  <el-dialog :title="!activeValue.id ? '添加用户' : '编辑用户'" :visible="isShowDialog" @close="closeDialog" @open="init">
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="企业名称" :label-width="formLabelWidth" prop="shortName">
        <el-input v-model="form.shortName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="所属公司" :label-width="formLabelWidth" prop="company">
        <el-input v-model="form.company" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth"> <a href="https://www.tianyancha.com">https://www.tianyancha.com(在此可查询所属公司全称及简称)</a> </el-form-item>
      <el-form-item label="城市地区" :label-width="formLabelWidth" prop="province">
        <el-row type="flex" justify="space-between">
          <el-col :span="12">
            <province :val="form.province" @setCity="setCity"></province>
          </el-col>
          <el-col :span="12">
            <city :val="form.city" :lists="city_qu" @setQu="setQu"></city>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="方向(企业标签)" :label-width="formLabelWidth" prop="tags">
        <el-input v-model="form.tags" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth" prop="remarks">
        <el-input type="textarea" :rows="3" placeholder="请输入" v-model="form.remarks" autocomplete="off"> </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import province from './province.vue'
import city from './city.vue'
import { citys } from '@/api/hmmm/citys.js'
import { add, update } from '@/api/hmmm/companys.js'
export default {
  components: {
    province,
    city
  },
  methods: {
    setQu (val) {
      this.form.city = val
    },
    setCity (val) {
      this.form.province = val
      this.city_qu = citys(val)
      this.form.city = this.city_qu[0]
    },
    cancel () {
      this.$refs.form.resetFields()
      this.$emit('update:isShowDialog', false)
      this.$emit('updateData')
    },
    submit () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (!this.activeValue.id) {
            // 添加
            await add(this.form)
          } else {
            // 修改
            this.form.isFamous = this.isFamous === 1
            await update(this.form)
          }
          this.$message({
            message: this.form.id ? '修改成功' : '添加成功',
            type: 'success'
          })
          this.cancel()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    closeDialog () {
      this.cancel()
    },
    init () {
      console.log('我执行了')
      if (this.activeValue.id) this.form = this.activeValue
      else {
        this.form = {
          shortName: '',
          company: '',
          province: '',
          city: '',
          tags: '',
          remarks: '',
          isFamous: true
        }
      }
    }
  },
  props: {
    activeValue: {
      type: Object,
      default: null
    },
    isShowDialog: {
      type: Boolean
    }
  },
  data () {
    return {
      form: {
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
        isFamous: true
      },
      city_qu: [],
      formLabelWidth: '80px',
      rules: {
        shortName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        company: [{ required: true, message: '请输入所属公司', trigger: 'blur' }],
        province: [{ required: true, message: '请输入所在城市', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入企业标签', trigger: 'blur' }],
        remarks: [
          { required: true, message: '请输入企业备注', trigger: 'blur' },
          { min: 3, message: '最少3个字符', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding-bottom: 0 !important;
}
::v-deep .el-form-item__label {
  width: 120px !important;
}
::v-deep .el-form {
  padding-right: 90px;
  margin-left: 40px;
}
.el-input.el-input--medium,
.el-textarea {
  width: 100%;
}
::v-deep .el-form-item__content {
  margin-left: 120px !important;
}
.dialog-footer {
  text-align: center;
}
.el-col-12 {
  width: auto;
}
</style>
